<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
				<text class="back-text">返回</text>
			</view>
			<text class="page-title">JSA确认</text>
			<view class="header-right">
				<text class="refresh-btn" @click="refreshData">刷新</text>
			</view>
		</view>

		<!-- 筛选器 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'all' }"
					@click="selectStatus('all')"
				>
					<text class="tab-text">全部</text>
					<view class="tab-count">{{ getTotalCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'pending' }"
					@click="selectStatus('pending')"
				>
					<text class="tab-text">待确认</text>
					<view class="tab-count">{{ getPendingCount() }}</view>
				</view>
				<view 
					class="filter-tab" 
					:class="{ active: selectedStatus === 'confirmed' }"
					@click="selectStatus('confirmed')"
				>
					<text class="tab-text">已确认</text>
					<view class="tab-count">{{ getConfirmedCount() }}</view>
				</view>
			</view>
		</view>

		<!-- JSA列表 -->
		<scroll-view class="list-scroll" scroll-y>
			<view class="list-container">
				<view
					v-for="(item, index) in filteredJsaList"
					:key="item.id"
					class="jsa-card"
					@click="viewJsaDetail(item)"
				>
					<!-- 卡片头部 -->
					<view class="card-header">
						<view class="header-left">
							<text class="jsa-number">{{ item.jsaNumber }}</text>
							<view class="status-badge" :class="getStatusClass(item.status)">
								<text class="status-text">{{ getStatusText(item.status) }}</text>
							</view>
						</view>
						<view class="header-right">
							<text class="create-time">{{ formatTime(item.createTime) }}</text>
						</view>
					</view>

					<!-- 卡片内容 -->
					<view class="card-content">
						<view class="content-row">
							<text class="label">作业类型：</text>
							<text class="value">{{ getWorkTypeText(item.workType) }}</text>
						</view>
						<view class="content-row">
							<text class="label">作业地点：</text>
							<text class="value">{{ item.location }}</text>
						</view>
						<view class="content-row">
							<text class="label">创建人：</text>
							<text class="value">{{ item.creator }}</text>
						</view>
						<view class="content-row">
							<text class="label">作业描述：</text>
							<text class="value description">{{ item.workDescription }}</text>
						</view>
					</view>

					<!-- 卡片底部 -->
					<view class="card-footer">
						<view class="analysis-info">
							<text class="info-text">{{ item.analysisSteps.length }} 个作业步骤</text>
							<text class="info-text">{{ item.analyzers.length }} 名分析人员</text>
						</view>
						<view class="action-buttons">
							<button 
								class="action-btn detail-btn" 
								@click.stop="viewJsaDetail(item)"
							>
								查看详情
							</button>
							<button 
								v-if="item.status === 'pending'"
								class="action-btn confirm-btn" 
								@click.stop="confirmJsa(item)"
							>
								确认
							</button>
						</view>
					</view>
				</view>

				<!-- 空状态 -->
				<view v-if="filteredJsaList.length === 0" class="empty-state">
					<text class="empty-icon">📋</text>
					<text class="empty-text">暂无JSA记录</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectedStatus: 'pending', // 默认选择待确认
				jsaList: [
					{
						id: '1',
						jsaNumber: 'JSA20250101001',
						workType: 'equipment_maintenance',
						location: 'A区设备车间',
						creator: '张三',
						workDescription: '设备维护检修作业，包括设备清洁、润滑、零部件更换等',
						status: 'pending',
						createTime: '2025-01-15 09:30:00',
						analysisSteps: [
							{ step: '设备停机', risk: '意外启动', controlMeasure: '上锁挂牌', responsiblePerson: '李四' },
							{ step: '设备清洁', risk: '化学伤害', controlMeasure: '佩戴防护用品', responsiblePerson: '王五' }
						],
						analyzers: [
							{ id: '1', name: '李四', department: '维修部' },
							{ id: '2', name: '王五', department: '安全部' }
						]
					},
					{
						id: '2',
						jsaNumber: 'JSA20250101002',
						workType: 'high_altitude',
						location: 'B区高空作业平台',
						creator: '赵六',
						workDescription: '高空设备安装作业，涉及高空作业平台操作',
						status: 'pending',
						createTime: '2025-01-15 14:20:00',
						analysisSteps: [
							{ step: '佩戴安全带', risk: '高空坠落', controlMeasure: '双钩安全带', responsiblePerson: '赵六' },
							{ step: '检查平台', risk: '平台故障', controlMeasure: '定期检查', responsiblePerson: '孙七' }
						],
						analyzers: [
							{ id: '3', name: '孙七', department: '工程部' }
						]
					},
					{
						id: '3',
						jsaNumber: 'JSA20250101003',
						workType: 'electrical',
						location: 'C区配电室',
						creator: '周八',
						workDescription: '电气设备检修作业，涉及高压电操作',
						status: 'confirmed',
						createTime: '2025-01-14 16:45:00',
						analysisSteps: [
							{ step: '断电操作', risk: '触电危险', controlMeasure: '绝缘工具', responsiblePerson: '周八' },
							{ step: '验电确认', risk: '误送电', controlMeasure: '验电器', responsiblePerson: '吴九' }
						],
						analyzers: [
							{ id: '4', name: '吴九', department: '电气部' }
						]
					}
				]
			}
		},
		computed: {
			filteredJsaList() {
				if (this.selectedStatus === 'all') {
					return this.jsaList
				}
				return this.jsaList.filter(item => item.status === this.selectedStatus)
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			refreshData() {
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			},
			
			selectStatus(status) {
				this.selectedStatus = status
			},
			
			getTotalCount() {
				return this.jsaList.length
			},
			
			getPendingCount() {
				return this.jsaList.filter(item => item.status === 'pending').length
			},
			
			getConfirmedCount() {
				return this.jsaList.filter(item => item.status === 'confirmed').length
			},
			
			getStatusClass(status) {
				return `status-${status}`
			},
			
			getStatusText(status) {
				const statusMap = {
					pending: '待确认',
					confirmed: '已确认'
				}
				return statusMap[status] || status
			},
			
			getWorkTypeText(type) {
				const typeMap = {
					equipment_maintenance: '设备维护',
					high_altitude: '高空作业',
					electrical: '电气作业',
					chemical: '化学作业',
					hot_work: '动火作业'
				}
				return typeMap[type] || type
			},
			
			formatTime(time) {
				return time.split(' ')[0] // 只显示日期部分
			},
			
			viewJsaDetail(item) {
				uni.showToast({
					title: `查看JSA详情: ${item.jsaNumber}`,
					icon: 'none'
				})
			},
			
			confirmJsa(item) {
				uni.showModal({
					title: '确认JSA',
					content: `确定要确认JSA ${item.jsaNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							item.status = 'confirmed'
							uni.showToast({
								title: '确认成功',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
	}
	
	.page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;
		
		.header-left {
			display: flex;
			align-items: center;
			
			.back-icon {
				font-size: 36rpx;
				margin-right: 10rpx;
				color: #409EFF;
			}
			
			.back-text {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
		
		.page-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.header-right {
			.refresh-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}
	
	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #e4e7ed;
		
		.filter-tabs {
			display: flex;
			gap: 20rpx;
			
			.filter-tab {
				position: relative;
				padding: 16rpx 24rpx;
				border-radius: 24rpx;
				background: #f5f5f5;
				display: flex;
				align-items: center;
				gap: 8rpx;
				transition: all 0.3s ease;
				
				&.active {
					background: #409EFF;
					
					.tab-text {
						color: #fff;
					}
					
					.tab-count {
						background: rgba(255, 255, 255, 0.3);
						color: #fff;
					}
				}
				
				.tab-text {
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
				
				.tab-count {
					background: #e4e7ed;
					color: #666;
					border-radius: 12rpx;
					padding: 4rpx 12rpx;
					font-size: 22rpx;
					min-width: 32rpx;
					text-align: center;
				}
			}
		}
	}
	
	.list-scroll {
		flex: 1;
	}
	
	.list-container {
		padding: 20rpx;
		
		.jsa-card {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
			overflow: hidden;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.98);
			}
			
			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24rpx 30rpx 16rpx;
				border-bottom: 1rpx solid #f0f0f0;
				
				.header-left {
					display: flex;
					align-items: center;
					gap: 16rpx;
					
					.jsa-number {
						font-size: 32rpx;
						font-weight: bold;
						color: #409EFF;
					}
					
					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 12rpx;
						font-size: 22rpx;
						
						&.status-pending {
							background: #fff7e6;
							color: #fa8c16;
						}
						
						&.status-confirmed {
							background: #f6ffed;
							color: #52c41a;
						}
						
						.status-text {
							font-weight: 500;
						}
					}
				}
				
				.header-right {
					.create-time {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.card-content {
				padding: 20rpx 30rpx;
				
				.content-row {
					display: flex;
					margin-bottom: 16rpx;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						font-size: 28rpx;
						color: #666;
						min-width: 160rpx;
					}
					
					.value {
						font-size: 28rpx;
						color: #333;
						flex: 1;
						
						&.description {
							line-height: 1.4;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
			
			.card-footer {
				padding: 20rpx 30rpx 24rpx;
				border-top: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.analysis-info {
					display: flex;
					gap: 24rpx;
					
					.info-text {
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.action-buttons {
					display: flex;
					gap: 16rpx;
					
					.action-btn {
						padding: 12rpx 24rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						border: none;
						
						&.detail-btn {
							background: #f0f0f0;
							color: #666;
						}
						
						&.confirm-btn {
							background: #409EFF;
							color: #fff;
						}
					}
				}
			}
		}
		
		.empty-state {
			text-align: center;
			padding: 120rpx 0;
			
			.empty-icon {
				font-size: 120rpx;
				margin-bottom: 20rpx;
			}
			
			.empty-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>